import { useState } from "react";
import viteLogo from "/vite.svg";
import "./App.css";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import ChatClient from "./pages/ChatClient";
import reactLogo from "./assets/react.svg";

const App: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <Router>
      <nav style={{ marginBottom: 24 }}>
        <Link to="/" style={{ marginRight: 16 }}>
          首页
        </Link>
        <Link to="/chat">ChatClient 聊天机器人</Link>
      </nav>
      <Routes>
        <Route
          path="/"
          element={
            <div
              style={{
                minHeight: "calc(100vh - 80px)",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <div className="main-card">
                <div>
                  <a
                    href="https://vite.dev"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <img src={viteLogo} className="logo" alt="Vite logo" />
                  </a>
                  <a
                    href="https://react.dev"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <img
                      src={reactLogo}
                      className="logo react"
                      alt="React logo"
                    />
                  </a>
                </div>
                <h1>Vite + React</h1>
                <div className="card">
                  <button onClick={() => setCount((count) => count + 1)}>
                    count is {count}
                  </button>
                  <p>
                    Edit <code>src/App.tsx</code> and save to test HMR
                  </p>
                </div>
                <p className="read-the-docs">
                  Click on the Vite and React logos to learn more
                </p>
              </div>
            </div>
          }
        />
        <Route path="/chat" element={<ChatClient />} />
        {/* 这里可以继续添加更多 Route 以扩展页面 */}
      </Routes>
    </Router>
  );
};

export default App;
